<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<style>
    #shop{
        width:800px;
        height:110px;
        text-align: center;
        /*margin-left:100px;*/
         margin-top: 10%;
        font-size: 20px;
    }
    #jiantou{
        margin-left:400px;
    }
</style>
<head>
    <meta charset="utf-8">
    <title>Men category | Metronic Shop UI</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../bootstrap/user/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- for slider-range -->
    <link href="../bootstrap/user/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link href="../bootstrap/user/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="../bootstrap/user/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<!--<div id="wrapper">-->

    <!-- BEGIN TOP BAR -->
    <!--<div th:include="common/userShopHead :: head"></div>-->
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <!--<div th:include="common/userShopHead :: head-navigation"></div>-->
    <!-- END HEADER -->
    <!-- BEGIN TOP BAR -->

    <!-- END TOP BAR -->


    <!-- END HEADER -->

   <!--<div th:text="${shopList.pirce==null?'无相关商品':'123'}"></div>-->

        <div class="row product-list">

            <!-- PRODUCT ITEM START -->
            <div class="col-md-3 col-sm-4 col-xs-5" th:each="shopList,info : ${shopList}" th:if="${shopList!=null}">
                <div id=shop th:style="${shopList.pirce==null?'display:block':'display:none'} "><p>无&nbsp;相&nbsp;关&nbsp;商&nbsp;品</p></div>
                <div class="product-item" th:style="${shopList.pirce==null?'display:none':'display:block'} " >
                    <div class="pi-img-wrapper">
                        <img class="img-responsive" th:src="${shopList.pageaddr}+'/'+${shopList.saveFileName}"/>
                        <div>
                            <a th:href="${shopList.pageaddr}+'/'+${shopList.saveFileName}"
                               class="btn btn-default fancybox-button" width="0px">查看</a>
                            <a href="#product-pop-up"
                               class="btn btn-default fancybox-fast-view">View</a>
                        </div>
                    </div>
                    <h3><a href="item.html" th:text="${shopList.name}"></a></h3>
                    <div   class="pi-price" th:text="'¥'+${shopList.pirce}"></div>
                    <a @click="addCar($event)" class="btn btn-default add2cart"
                       th:id="${shopList.id}">加入购物车</a>
                    <div class="sticker sticker-sale" th:if="${info.index ==0}"></div>
                    <div class="sticker sticker-new" th:if="${info.index ==1}"></div>
                </div>

                <div class="row">
                    <div  style="width: 200px" class="col-md-6 col-sm-6 items-info" th  th:text="${shopList.pirce}==null?'Items ' + '0' + ' to ' + '0' + ' of ' + '0' + ' total':${'Items ' + pageInfo.startRow + ' to ' + pageInfo.endRow + ' of ' + pageInfo.total + ' total'}">Items 1 to 9 of 10 total</div>

                    <div class="col-md-8 col-sm-8" id="jiantou" th:style="${shopList.pirce==null?'display:none':'display:block'} ">
                        <ul id="ul" class="pagination pull-right">
                            <li id="pageLi"><a href="javascript:void(0);" id="prePage"><<</a></li>
                            <!--<li><span>1</span></li>-->
                            <!--<li th:each="i:${#numbers.sequence(pageInfo.pageNum, pageInfo.pageNum + 3)}"><a href="" th:onclick="${'jumpPage('+i+')'}" th:text="${i}"></a></li>-->
                            <!--<li><span>2</span></li>
                            <li>< a href="#">3</ a></li>
                            <li>< a href="#">4</ a></li>
                            <li>< a href="#">5</ a></li>-->
                            <li><a href="javascript:void(0);" id="aftPage">>></a></li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- PRODUCT ITEM END -->
        </div>
        <!-- END PRODUCT LIST -->
        <!-- BEGIN PAGINATOR -->



</div>
        <!-- END PAGINATOR -->
    </div>

<!--</div>-->
<!-- END fast view of a product -->

<div th:include="common/Head :: js"></div>

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../bootstrap/user/plugins/respond.min.js"></script>
<![endif]-->
<script src="../bootstrap/user/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/back-to-top.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="../bootstrap/user/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!-- for slider-range -->
<script src="../bootstrap/user/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->

<script type="text/javascript" src="../bootstrap/user/scripts/app.js"></script>
<!--
<script type="text/javascript" src="../bootstrap/user/scripts/test.js"></script>
-->

<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script src="../bootstrap/js/project/user/shop/index/js/test.js"></script>
<script src="../commJs/yuhe.js"></script>


<script type="text/javascript" th:inline="javascript">



    jQuery(document).ready(function () {


        // App.init();
        // App.initBxSlider();
        // App.initImageZoom();
        // App.initSliderRange();
        // App.initUniform();
        // App.initTouchspin();


        var cId = [[${cId}]];
        var pageSize = 2;

        var pageInfo = [[${pageInfo}]];
        var pageNum = pageInfo.pageNum;
        var pages = pageInfo.pages; // 总页数

        var $pageLi = $('#pageLi');
        var x = Math.floor(pageNum / 5);
        var y = pageNum % 5;
        var start = 5 * x + 1;
        var k = 1;
        var li = '';
        for (var i = start; i <= start + 4; i++) {
            if (i > pages) {
                break;
            }
            if (y === k) {
                li += '<li><span id="current">' + pageNum + '</span></li>';
            } else {
                li += '<li><a href="javascript:void(0)" id="'+i+'">' + i + '</a></li>';
            }
            k++;
        }
        $pageLi.after(li);

        var parentIframe = window.parent.document.getElementById('iframepage');

        $('#ul').find('li>a').on('click', function () {
            var id = $(this).attr('id');
            parentIframe.src = '/touristShop/shopList.html?cid=' + cId + '&pageSize=' + pageSize + '&pageNum=' + id;
        });

        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        $('#prePage').on('click', function () {
            var currentPageNum = Number($('#current').text());
            if (currentPageNum > start) {
                parentIframe.src = '/touristShop/shopList.html?cid=' + cId + '&pageSize=' + pageSize + '&pageNum=' + (currentPageNum - 1);
            } else {
                parentIframe.src = '/touristShop/shopList.html?cid=' + cId + '&pageSize=' + pageSize + '&pageNum=' + currentPageNum;
            }
        });

        $('#aftPage').on('click', function () {
            var currentPageNum = Number($('#current').text());
            if (currentPageNum < pages) {
                parentIframe.src = '/touristShop/shopList.html?cid=' + cId + '&pageSize=' + pageSize + '&pageNum=' + (currentPageNum + 1);
            } else {
                parentIframe.src = '/touristShop/shopList.html?cid=' + cId + '&pageSize=' + pageSize + '&pageNum=' + currentPageNum;
            }
        });

        authIframeHeight();

        function authIframeHeight() {
            var productListHeight = $('.product-list').height();
            parentIframe.height = productListHeight + 35;
        }

        $(window).resize(function () {
            authIframeHeight();
        });

        // 加入购物车
        /*$('.add2cart').on('click', function () {
            // 加入购物车前先调用此方法
            yuheUtils.checkLogin();

            // todo 这里写加入购物车逻辑
            var shopId = $(this).attr("id");

        });
*/


    });
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>